<template>
  <!-- el-cascader 是级联组件：可以显示一二三菜单的形式 -->
  <!-- options -> 设置级联菜单数据源 -->
  <!-- props -> 配置选项 比如设置次级菜单的展开姿势：expandTrigger: 'click/hover' -->
  <!-- props -> label 指定选项标签  value 指定选项的值 -->
  <!-- change 事件：可以监听用户选择了某个菜单：[‘菜单的id’] -->
  <el-cascader
    :value="value"
    class="inputW"
    size="small"
    separator="-"
    :options="deptList"
    :props="cascaderProps"
    @change="handleChange"
  />
  <!-- @focus="onFocus" -->
</template>

<script>
import { listTree } from '@/utils'
import { getDepartments } from '@/api/user'
export default {
  props: {
    value: {
      // 对于类型不太确定的情况，可以多写几个
      type: [String, Number, Array],
      default: ''
    }
  },
  data() {
    return {
      // value: [],
      deptList: [],
      cascaderProps: {
        expandTrigger: 'hover',
        label: 'name',
        value: 'id'
      }
    }
  },
  created() {
    this.onFocus()
  },
  methods: {
    // handleChange(value) {
    //   console.log(value)
    // }
    handleChange(deptIds) {
      this.$emit('input', deptIds.length ? deptIds[deptIds.length - 1] : null)
      //   if (deptIds.length) {
      //     this.$emit('input', deptIds[deptIds.length - 1])
      //   } else {
      //     // 兼容用户清楚选择菜单的情况，更新 departmentId 为默认值
      //     this.$emit('input', null)
      //   }
      // value 指向的是你选中所有菜单的对应 id 的集合
      //   console.log(value)
      // 我需要最后那个部门的id
      //   const currentId = deptIds[deptIds.length - 1]
      //   // 拿到选中的部门id 之后，给父组件里面的 departmentId 做更新就好了

    //
    },
    async onFocus() {
      const res = await getDepartments()
      this.deptList = listTree(res, 0)
    }
  }
}
</script>
